<template>
  <div class="charge-strategy-desc-container">
    <el-descriptions
      v-if="chargeForm && chargeForm.chargeMode === 'FREE'"
      title="免费"
    >
    </el-descriptions>

    <!-- 扫码收费模式 -->
    <el-descriptions
      v-if="
        chargeForm &&
        chargeForm.chargeMode === 'FEE' &&
        chargeForm.scanChargeRuleConfig.billType
      "
      title="扫码收费模式"
      column="1"
      :labelStyle="{ width: '110px' }"
      style="margin-bottom: 20px"
    >
      <el-descriptions-item label="收费模式">
        {{ billTypeMap[chargeForm.scanChargeRuleConfig.billType] || "-" }}
      </el-descriptions-item>
      <el-descriptions-item label="最低消费">
        {{ chargeForm.scanChargeRuleConfig.minimumPrice || "-" }}元
      </el-descriptions-item>
      <el-descriptions-item label="充满自停预扣">
        {{ chargeForm.scanChargeRuleConfig.fullStopPrice || "-" }}元
      </el-descriptions-item>

      <!-- 电量收费 -->
      <template v-if="chargeForm.scanChargeRuleConfig.billType === 'ELEC'">
        <!-- 全时段统一计费 -->
        <template v-if="chargeForm.scanChargeRuleConfig.chargeType === 'UNI'">
          <el-descriptions-item label="电费单价">
            {{ billTypeMap[chargeForm.scanChargeRuleConfig.price] }}元
          </el-descriptions-item>
          <el-descriptions-item label="服务费单价">
            {{ billTypeMap[chargeForm.scanChargeRuleConfig.servicePrice] }}元
          </el-descriptions-item>
        </template>
        <!-- 峰谷电计费 -->
        <template
          v-else-if="
            chargeForm.scanChargeRuleConfig.chargeType === 'PEAK_VALLEY'
          "
        >
          <el-descriptions-item label="峰值电价/服务费">
            <span>
              {{ chargeForm.scanChargeRuleConfig.peakPrice || "-" }}元</span
            >
            <span style="margin: 0 5px">/</span>
            <span
              >{{
                chargeForm.scanChargeRuleConfig.peakServicePrice || "-"
              }}元</span
            >
          </el-descriptions-item>
          <el-descriptions-item label="谷值电价/服务费">
            <span
              >{{ chargeForm.scanChargeRuleConfig.valleyPrice || "-" }}元</span
            >
            <span style="margin: 0 5px">/</span>
            <span
              >{{
                chargeForm.scanChargeRuleConfig.valleyServicePrice || "-"
              }}元</span
            >
          </el-descriptions-item>
          <el-descriptions-item label="平值电价/服务费">
            <span
              >{{ chargeForm.scanChargeRuleConfig.normalPrice || "-" }}元</span
            >
            <span style="margin: 0 5px">/</span>
            <span
              >{{
                chargeForm.scanChargeRuleConfig.normalServicePrice || "-"
              }}元</span
            >
          </el-descriptions-item>
          <el-descriptions-item label="峰谷值时间段">
            <div style="display: flex; flex-direction: column">
              <div
                style="margin-bottom: 5px"
                v-for="(item, index) in chargeForm.scanChargeRuleConfig
                  .peakValleyTimeRange"
                :key="index"
              >
                {{ peakValleyMap[item.type] }}: {{ item.startTime }} ~
                {{ item.endTime }}
              </div>
            </div>
          </el-descriptions-item>
        </template>
      </template>

      <!-- 固定收费 -->
      <template v-if="chargeForm.scanChargeRuleConfig.billType === 'FIXED'">
        <el-descriptions-item label="计费规则">
          {{ chargeForm.scanChargeRuleConfig.chargePrice }}元 每{{
            chargeForm.scanChargeRuleConfig.chargeHour
          }}小时
        </el-descriptions-item>
      </template>

      <!-- 阶梯收费 -->
      <template v-if="chargeForm.scanChargeRuleConfig.billType === 'STEP'">
        <el-descriptions-item label="阶梯收费">
          <div style="display: flex; flex-direction: column">
            <div
              style="margin-bottom: 5px"
              v-for="(item, index) in chargeForm.scanChargeRuleConfig
                .stepPriceRange"
              :key="index"
            >
              <span
                style="display: inline-block; width: 60px; text-align: center"
              >
                {{
                  index === 0
                    ? 1
                    : chargeForm.scanChargeRuleConfig.stepPriceRange[index - 1]
                        .end /
                        1 +
                      1
                }}
              </span>
              ~
              <span
                style="display: inline-block; width: 60px; text-align: center"
              >
                {{ item.end }}
              </span>
              W
              <span
                style="display: inline-block; width: 60px; text-align: center"
              >
                {{ item.price }} 元
              </span>
              充
              <span
                style="display: inline-block; width: 60px; text-align: center"
              >
                {{ item.hour }} 小时
              </span>
            </div>
          </div>
        </el-descriptions-item>
      </template>
    </el-descriptions>

    <!-- 实体卡收费模式 -->
    <el-descriptions
      v-if="
        chargeForm &&
        chargeForm.chargeMode === 'FEE' &&
        chargeForm.cardChargeRuleConfig.billType
      "
      title="实体卡收费模式"
      column="1"
      :labelStyle="{ width: '110px' }"
    >
      <el-descriptions-item label="收费模式">
        {{ billTypeMap[chargeForm.cardChargeRuleConfig.billType] }}
      </el-descriptions-item>
      <el-descriptions-item label="预扣金额">
        {{ chargeForm.cardChargeRuleConfig.preDeductedAmount }}元
      </el-descriptions-item>

      <!-- 电量收费 -->
      <template v-if="chargeForm.cardChargeRuleConfig.billType === 'ELEC'">
        <!-- 全时段统一计费 -->
        <template v-if="chargeForm.cardChargeRuleConfig.chargeType === 'UNI'">
          <el-descriptions-item label="电费单价">
            {{ chargeForm.cardChargeRuleConfig.price }}元
          </el-descriptions-item>
          <el-descriptions-item label="服务费单价">
            {{ chargeForm.cardChargeRuleConfig.servicePrice }}元
          </el-descriptions-item>
        </template>
        <!-- 峰谷电计费 -->
        <template
          v-else-if="
            chargeForm.cardChargeRuleConfig.chargeType === 'PEAK_VALLEY'
          "
        >
          <el-descriptions-item label="峰值电价/服务费">
            <span>{{ chargeForm.cardChargeRuleConfig.peakPrice }}元</span>
            <span style="margin: 0 5px">/</span>
            <span
              >{{ chargeForm.cardChargeRuleConfig.peakServicePrice }}元</span
            >
          </el-descriptions-item>
          <el-descriptions-item label="谷值电价/服务费">
            <span>{{ chargeForm.cardChargeRuleConfig.valleyPrice }}元</span>
            <span style="margin: 0 5px">/</span>
            <span
              >{{ chargeForm.cardChargeRuleConfig.valleyServicePrice }}元</span
            >
          </el-descriptions-item>
          <el-descriptions-item label="平值电价/服务费">
            <span
              >{{ chargeForm.cardChargeRuleConfig.normalPrice || "-" }}元</span
            >
            <span style="margin: 0 5px">/</span>
            <span
              >{{
                chargeForm.cardChargeRuleConfig.normalServicePrice || "-"
              }}元</span
            >
          </el-descriptions-item>
          <el-descriptions-item label="峰谷值时间段">
            <div style="display: flex; flex-direction: column">
              <div
                style="margin-bottom: 5px"
                v-for="(item, index) in chargeForm.cardChargeRuleConfig
                  .peakValleyTimeRange"
                :key="index"
              >
                {{ peakValleyMap[item.type] }}: {{ item.startTime }} ~
                {{ item.endTime }}
              </div>
            </div>
          </el-descriptions-item>
        </template>
      </template>

      <!-- 固定收费 -->
      <template v-if="chargeForm.cardChargeRuleConfig.billType === 'FIXED'">
        <el-descriptions-item label="计费规则">
          {{ chargeForm.cardChargeRuleConfig.chargePrice }}元 每{{
            chargeForm.cardChargeRuleConfig.chargeHour
          }}小时
        </el-descriptions-item>
      </template>

      <!-- 阶梯收费 -->
      <template v-if="chargeForm.cardChargeRuleConfig.billType === 'STEP'">
        <el-descriptions-item label="阶梯收费">
          <div style="display: flex; flex-direction: column">
            <div
              style="margin-bottom: 5px"
              v-for="(item, index) in chargeForm.cardChargeRuleConfig
                .stepPriceRange"
              :key="index"
            >
              <span
                style="display: inline-block; width: 60px; text-align: center"
              >
                {{
                  index === 0
                    ? 1
                    : chargeForm.cardChargeRuleConfig.stepPriceRange[index - 1]
                        .end /
                        1 +
                      1
                }}
              </span>
              ~
              <span
                style="display: inline-block; width: 60px; text-align: center"
              >
                {{ item.end }}
              </span>
              W
              <span
                style="display: inline-block; width: 60px; text-align: center"
              >
                {{ item.price }} 元
              </span>
              充
              <span
                style="display: inline-block; width: 60px; text-align: center"
              >
                {{ item.hour }} 小时
              </span>
            </div>
          </div>
        </el-descriptions-item>
      </template>
    </el-descriptions>
  </div>
</template>
<script>
export default {
  props: {
    chargeForm: {
      type: Object,
      require: true,
    },
  },
  data() {
    return {
      billTypeMap: {
        ELEC: "电量收费",
        FIXED: "固定收费",
        STEP: "阶梯收费",
      },
      peakValleyMap: {
        PEAK: "峰时段",
        VALLEY: "谷时段",
        NORMAL: "平时段",
      },

      chargeStrategy: {},
    };
  },
  watch: {
    chargeForm(val) {
      this.formChange();
    },
  },
  created() {
    this.formChange();
  },
  methods: {
    formChange() {
      this.chargeStrategy = { ...this.chargeForm };
      this.chargeStrategy.scanChargeRuleConfig =
        this.chargeStrategy.scanChargeRuleConfig || {};
      this.chargeStrategy.cardChargeRuleConfig =
        this.chargeStrategy.cardChargeRuleConfig || {};

      console.log("值变了", this.chargeStrategy);
      this.$forceUpdate();
    },
  },
};
</script>
<style scoped></style>
